<template>
	<view>
		<view class="top">
			<view class="top-tabs">
				
				<u-tabs :activeStyle="{
        color: '#FFFFFF',
        fontWeight: 'bold',
        transform: 'scale(1.05)'
    }" :inactiveStyle="{
        color: '#FFFFFF',
        transform: 'scale(1)'
    }" lineColor="#FFFFFF" lineWidth="40px" :list="list1"></u-tabs>
			
			</view>
			
		</view>
		<view class="bottom">
			<view class="bottom-card1">
				<view class="card_01">
					<!-- <uni-card class="card_01" :is-shadow="false" is-full> -->
					<view class="card_000">
						<view class="card_001">
							<view>维修方式:</view>
							<view>
								<uni-data-select class="xlk" v-model="value" :localdata="range"
									@change="change"></uni-data-select>
							</view>
						</view>
						<view class="card_002">
							<u--text @click="open" prefixIcon="calendar" size="20rpx" iconStyle="font-size: 20px"
								text="预约日期"></u--text>
						</view>
					</view>
					<!-- </uni-card> -->
				</view>
				<view class="card_02">
					<view class="neirong">
						维修单号：<text style="color:#A5A5A5;">123645</text>
					</view>
					<view class="neirong">
						维修方式：<text style="color:#A5A5A5;">123645</text>
					</view>
					<view class="neirong">
						预约日期：<text style="color:#A5A5A5;">123645</text>
					</view>
				</view>
			</view>
		</view>
		<view>
			<uni-popup  background-color="#fff" ref="popup" border-radius="10px 10px 0 0">
				<view class="example-body">
					<view>开始时间:</view>
					<uni-datetime-picker type="datetime" v-model="datetimesingle" />
				</view>
				<view class="example-body">
					<view>结束时间:</view>
					<uni-datetime-picker type="datetime" v-model="datetimesingle1" />
				</view>
			</uni-popup>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				datetimesingle:'',
				datetimesingle1:'',
				list1: [{
					name: '进行中',
				}, {
					name: '已完成',
				}],
				value: 0,
				range: [{
						value: 0,
						text: "全部"
					},
					{
						value: 1,
						text: "到店维修"
					},
					{
						value: 2,
						text: "上门取车"
					},
				],

			}
		},
		methods: {
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('center')
			},
			change(e) {
				console.log("e:", e);
			},

		}
	}
</script>

<style lang="scss">
	.example-body {
		display: flex;
		justify-items: center;
			background-color: #fff;
			padding: 10px;
		}
		.example-body view:first-child{
			padding-top: 10px;
			width: 100px;
			margin-right: 10px;
		}
	.top {
		width: 100%;
		height: 200px;
		background-color: #FF7500;
	}

	.top-tabs {
		margin-left: 30%;
		padding-top: 10rpx;

	}

	.bottom {
		margin: 0 10px;

	}

	.bottom-card1 {
		margin-top: -130px;

	}

	.card_02 {
		height: 120px;
		margin-top: 10px;
		padding: 10px 10px;
		border-radius: 5px;
		background-color: #FFFFFF;
	}

	.card_01 {
		height: 50px;
		padding-top: 10px;
		border-radius: 5px;
		background-color: #FFFFFF;
	}

	.xlk {
		width: 90px;
		height: 35px;
		background-color: #FF7500;
		border-radius: 5px;

	}

	.card_001 {
		display: flex;
		align-items: center;

	}

	.card_001 view:first-child {
		margin-right: 10rpx;
	}

	.card_000 {
		margin: 0 10px;
		display: flex;
		justify-content: space-between;

	}

	.card_002 {
		margin-top: 14rpx;
	}

	.text {
		color: #FFFFFF;
	}

	.neirong {
		margin-left: 20px;
		margin-top: 16px;
		color: #303030;
	}
</style>